import './clearLog'
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import '@/router/permission'
import store from './store'
import 'amfe-flexible'
import directives from './utils/directives'
// import hljs from 'highlight.js' // hljs对象
import 'highlight.js/styles/default.css'
import '@/VantRegister.js' // 引入注册Vant组件的相关代码
import Notify from '@/ui/Notify'
// Vue.use()中间件函数,调用()里对象的install方法
// install方法里 Vue.component( 'van-button '，组件内对象)
Vue.use(Notify)
Vue.use(directives)
Vue.config.productionTip = false

// Vue.directive('highlight', function (el) { // 自定义一个代码高亮指令
//   const highlight = el.querySelectorAll('pre, code') // 获取里面所有pre或者code标签
//   highlight.forEach((block) => {
//     hljs.highlightElement(block) // 突出显示这些标签(以及内部代码, 会自动识别语言)
//   })
// })

// 知识点:
// 组件Vue.component全局注册
// 方法挂载原型属性上
// 指令Vue.directive全局注册

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

// 目标1:引入vant组件库,使用
// 1．下载vant组件库（yarn add vant)
// 2．自动按需引入到工程，需要一个插件(yarn add babel-plugin-import-D)
// 3. babel.config.js里，填入文档上配置(复制)-重启服务器
// 4. main.js -引入vant组件-全局注册
// 5．任意.vue组件内，使用van-开头的全局组件

// 目标2:移动端适配
// 思路:vant组件库以及我们自己写px单位，都变成rem
// 1. html的font-size(单位px)，值(flexible.js)
// flexible.js(获取html的宽度/10)
// 2．找一个基准
// 参照iphone6机型来还原我们的设计图
// 375px宽度，所以iphone6机型下,375/10 -> html的font-size: 37.5pX;
// 3．把除了html以外子标签们，(px单位换成rem单位)
// 例如:我在iphone6设计图上(1:1)，量出宽度200的图片
// 设置img标签的宽度为200px / 37.5
// (1):拿计算器
// (2):px to rem插件
// (3):工程化(yarn管理包，webpack分析编译代码-集成功能)
// webpack+postcss+postcss-pxtorem
// 打包时，帮我把所有style里(标签里的它不管)px单位，转成rem单位
// 步骤:
// 1．下载postcss postcss-pxtorem@5.1.1 amfe-flexible1
// 2. postcss.config.js ->填入文档的配置
// 3. main.js 引入flexible.js
